<template>
	<view class="recommendation-list" v-if="recommendList.length && systemStore.isPersonalization"
		:style="{marginTop:recommendMarginTop + 'px'}">
		<view class="header u-flex-center">
			<uv-icon name="play-left" size="14" color="#000000"></uv-icon>
			<span class="header-text">猜你喜欢</span>
			<uv-icon name="play-right" size="14" color="#000000"></uv-icon>
		</view>
		<view class="product">
			<view class="li" v-for="item in recommendList" :key="item.id"
				@click="navigateTo(`/subPackages/product/detail?product_id=${item.id}`)">
				<zero-lazy-load :height="280" imgMode='aspectFill' :image="item.cover_image"
					class="image"></zero-lazy-load>
				<view class="li-name">{{item.name}}</view>
				<view class="li-label u-flex">
					<view class="box" v-for="(label,index) in item.label.slice(0,3)" :key="index">{{label}}</view>
				</view>
				<view class="li-footer u-flex-between">
					<view>
						<span class="icon">￥</span>
						<span class="price">{{item.minPriceSpec.price}}</span>
						<image src="https://qn.mtj.cdydsy.com/user_client/new-images/news.png" mode="aspectFill"
							class="new-img"></image>
						<span class="origin-price">{{item.minPriceSpec.original_price}}</span>
					</view>
					<view class="cart-icon" @click.stop="addShop(item)">
						<uni-icons type="cart" size="22" color="#4B4B4B"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { navigateTo } from '@/utils/router.js'
	import { apiAddReduce } from '@/api/shopping-cart.js'
	import useSystemStore from '@/store/modules/system.js'
	import useUserStore from '@/store/modules/user.js'
	import { showToast } from '@/utils/common.js'
	import eventBus from '@/utils/eventBus.js'

	const userStore = useUserStore()
	const systemStore = useSystemStore()
	const recommendList = uni.getStorageSync('recommendList')
	const props = defineProps({
		recommendMarginTop: {
			type: Number,
			default: 20
		}
	})

	// 添加到购物车
	const addShop = async (e) => {
		if (!userStore.checkLogin()) {
			// 未登录
			return;
		}
		uni.showLoading({
			title: "添加中..."
		})
		try {
			const { data } = await apiAddReduce({
				product_type: 1, // 普通商品
				type: 1, // 加1
				product_id: e.id, // 商品id
				product_spec_id: e.minPriceSpec.id, // 规格id
			})
			showToast('添加成功')
			eventBus.value.emit('getCartList');
		} catch (error) {
			showToast(error.msg || '添加失败')
		}
	}
</script>

<style lang="scss" scoped>
	.recommendation-list {
		padding: 0 28rpx;

		.header {
			padding: 30rpx 0;
			background: $base-color-white;
			border-radius: 6rpx;

			.header-text {
				padding: 0 16rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: $font-size-28;
				color: $base-color;
				text-align: center;
			}
		}

		.product {
			padding-top: 8rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 10rpx;

			.li {
				width: 342rpx;
				padding: 22rpx 14rpx 24rpx 20rpx;
				box-shadow: $base-box-shadow;
				border-radius: 12rpx;
				background-color: $base-color-white;


				.image {
					width: 308rpx;
					height: 280rpx;
					display: block;
				}

				.li-name {
					padding-top: 40rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: $font-size-24;
					color: $base-product-name-color;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.li-label {
					padding-top: 16rpx;

					.box {
						padding: 8rpx;
						background: #FFFFFF;
						border-radius: 2rpx 2rpx 2rpx 2rpx;
						border: 1px solid $base-border-color;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: $font-size-16;
						color: $base-border-color;
						line-height: 1;
						margin-right: 10rpx;
					}
				}

				.li-footer {
					padding-top: 20rpx;

					.icon {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: $font-size-20;
						color: $base-product-price-color;
					}

					.price {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: $font-size-32;
						color: $base-product-price-color;
					}

					.origin-price {
						padding-left: 10rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 300;
						font-size: $font-size-20;
						color: $base-origin-price-color;
						text-decoration: line-through;
					}

					.new-img {
						width: 76rpx;
						height: 30rpx;
						display: inline-block;
						margin-left: 6rpx;
					}
				}
			}
		}
	}
</style>